<template>
  <div>
    <div v-if="!tableData.length" style="color:#888;text-align:center;line-height:260px">
      暂无数据
    </div>
    <div v-for="(item,index) in tableData" :key="index" class="contain">

      <table class="pure-table pure-table-horizontal">
        <tr style="background-color:#f0f0f0">
          <th v-for="(i,key) in item.props" :key="key">{{ i }}</th>
        </tr>
        <tr
          v-for="(j,key) in item.dataList"
          :key="key"
          class="highlight"
        >
          <th
            :style="{display:key!==0?'none':'show',backgroundColor:key===0?'#f0f0f0':'#fff'}"
            :rowspan="item.secondCategoryList.length"
          > {{ j[0]==='优+功能沙发'?'功能沙发':j[0] }}</th>
          <td v-for="(i,k) in j" v-show="k!==0" :key="k" :style="{fontWeight:k===1?'bold':''}">{{ i||'' }}</td>
        </tr>
      </table>

    </div>

  </div>
</template>
<script>
export default {
  name: 'SeriesTable',
  props: {
    dataList: {
      type: Object,
      default: () => { return {} }
    },
    styleNum: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      tableData: [],
      propList: [],
      activeData: {}
    }
  },
  created() {
    const datas = Object.values(this.dataList)
    datas.forEach(v => {
      this.$set(v, 'props', ['', '', ...v.seriesList])
      this.$set(v, 'dataList', [])
      const dataItems = Object.keys(v).filter(i => Number(i) >= 0)
      v.dataList = dataItems.map(j => { return v[j] })
    })
    this.tableData = datas
  },
  methods: {
    handelclick(data, index) {
      this.activeData = data
    },
    getSelect() {
      return this.activeData
    }
  }
}
</script>
<style lang="scss" scoped>
.contain{
  // display: flex;
  // justify-content: center;
  padding:0 0 10px 0;
  // max-width:1100px ;
  overflow: auto;
  padding-left: 300px;
}
td,th {
    padding: 0;
}
.pure-table {
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
}

.pure-table caption {
    color: #000;
    font: italic 85%/1 arial,sans-serif;
    padding: 1em 0;
    text-align: center;
}

.pure-table td,.pure-table th {
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    font-size: inherit;
    margin: 0;
    overflow: visible;
    padding: .5em 1em;
}

.pure-table thead {
    background-color: #e0e0e0;
    color: #000;
    text-align: left;
    vertical-align: bottom;
}

.pure-table td {
    background-color: transparent;
}
.pure-table-horizontal td,.pure-table-horizontal th {
    border-width: 0 0 1px 0;
    border-bottom: 1px solid #cbcbcb;
}

.pure-table-horizontal tbody>tr:last-child>td {
    border-bottom-width: 0;
}
/deep/.highlight:hover{
    background-color:#F5F7FA;
}
</style>
